<template>
	<view class="body">
		<view class="heand">
			<image class="sosouicon" src="../../static/img/sousuo%20.png"></image>
			<input class="hinput" v-model="keyword" focus placeholder="裝自配电箱"></input>
			<view @click="sousuo" v-model="keyword" class="searchtext">搜索</view>
		</view>
		<view class="detailsbody">
			<view @click="tiaozhuang(item.id)" class="content2" v-for="(item, index) in list" :key="index" v-if="item.type1=='0'">
				<view class="detailsmsg">
					<view class="detailsimg">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="location">{{item.location}}</view>
					<view class="data">检查时间：{{item.createtime}}</view>
					<view class="sign" v-if="item.type1=='1'">今日已检</view>
					<view class="text1" v-if="item.status=='1'">
						<view class="tubiao1"></view>
						<view class="normal">正常</view>
					</view>
					<view class="text1" v-if="item.status=='2'">
						<view class="tubiao3"></view>
					    <view class="abnormal">异常</view>
					</view>
					<view class="text1" v-if="item.status=='3'">
						<view class="tubiao5"></view>
					    <view class="fault">故障</view>
					</view>
					<view class="text1" v-if="item.type1=='0'">
					    <view class="uninspected">未巡检</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [],
				status:'',
				type1:'1',
				id:''
			}
		},
		onLoad () {
			this.getData();
		},
		methods: {
			showActionSheet1: function () {
					uni.showActionSheet({
					itemList: ['全部','一级设备', '二级设备', '三级设备'],
					success: function (res) {
						if (res.tapIndex == 0){
							uni.navigateTo({
								url: '/pages/details/details'
							});
						} else if (res.tapIndex == 1) {
							uni.navigateTo({
								url: '/pages/onedetails/onedetails'
							});
						} else if (res.tapIndex == 2) {
							uni.navigateTo({
								url: '/pages/twodetails/twodetails'
							});
						} else if (res.tapIndex == 3) {
							uni.navigateTo({
								url: '/pages/threedetails/threedetails'
							});
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			showActionSheet2: function () {
					uni.showActionSheet({
					itemList: ['全部', '有巡检', '未巡检'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			showActionSheet3: function () {
					uni.showActionSheet({
					itemList: ['全部', '正常', '异常','故障'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						uni.navigateTo({
							url: '/pages/status/status'
						});
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			getData () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/consearch', 
					data: {
						type:'',
						type1:0,
						status:''
					},
					 method: "POST",
					success: (res) => {
						this.list = res.data.data;
					}
				})
			},
			sousuo () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/search', 
					data: {
						keyword:this.keyword,
					},
					 method: "POST",
					success: (res) => {
						this.list = res.data.data;
					}
				})
			},
			tiaozhuang (id) {
				uni.navigateTo({
					url:'/pages/xunjiaxq/xunjiaxq?id=' + id
				})
			}
		}
	}
</script>

<style>
	.heand {
		width: 100%;
		background-color: #3C6DD2;
		height: 76upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 118upx;
	}
	.hinput {
	    background-color: #FFFFFF;
		width: 75%;
		border-radius: 10upx;
		left: 10upx;
		padding-left: 50upx;
		position: absolute;
		height: 70upx;
		font-size: 30upx;
	}
	.sosouicon {
		width: 30upx;
		height: 30upx;
		z-index: 9999;
		margin-right: 80%;
	}
	.searchtext {
		color: #FFFFFF;
	}
	.bodyheander {
		width: 100%;
		background-color: #FFFFFF;
		padding: 3%;
		display: flex;
		font-size: 32upx;
	}
	.tittle {
		width: 33%;
		text-align: center;
		display: flex;
		align-items: center;
		color: #333333;
		justify-content: center;
	}
	.size {
		width: 20upx;
		height: 20upx;
		margin-left: 20upx;
		transform: rotate(180deg);
	}
	.detailsbody {
		width: 100%;
		display: flex;
	    flex-wrap: wrap;
	}
	.content2 {
		display: flex;
		width: 40%;
        background-color: #FFFFFF;
        padding: 12upx;
		margin: 3%;
		border-radius: 23upx;
		position: relative;
	}
	.sign {
		color: #FFFFFF;
		font-size: 28upx;
		position: absolute;
		margin-left: -10upx;
		background-color: #3C6DD2;
		margin-top: 28upx;
		width: 38%;
		text-align: center;
		border-radius: 0upx 10upx 10upx 0upx;
		padding: 4upx;
	}
	.detailsmsg {
		width: 100%;
		display: flex;
		text-align: center;
		flex-direction: column;
	}
	.detailsimg {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.name {
		color: #333333;
		font-size: 28upx;
		padding: 5upx;
	}
	.data {
		color: #999999;
		font-size: 23upx;
		padding: 5upx;
	}
	.location {
		font-size: 23upx;
		color: #333333;
		padding: 5upx;
	}
	.text1 {
		font-size: 20upx;
		display: flex;
		justify-content: center;
	}
	.normal {
		color: #2EC13C;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.abnormal {
		color: #FFD200;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.fault {
		color: #FD0006;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.uninspected {
		color: #999999;
		font-size: 28upx;
		padding: 5upx;
	}
	.tubiao1 {
		background-color: #2EC13C;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #C0ECC4;
	}
	.tubiao3 {
		background-color: #FFD200;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FFF1B2;
	}
	.tubiao5 {
		background-color: #FD0006;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FEB2B4;
	}
</style>
